<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>RF领用程序 Ver 1.00.01</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        .container {
            padding: 0.5rem;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 100vh;
        }

        .container .top {
            display: flex;
            justify-content: space-between;
            background-color: #ccc;
            border: black solid 1px;
        }

        .container .top .input-div {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .container .top .input-div .input {
            width: 400px;
            height: 60px;
            font-size: 60px;
        }

        .container .top .input-div .input:focus {
            outline: 0;
            border: 1px solid rgb(11, 234, 235);
            box-shadow: 0px 0px 5px 0px rgb(11, 234, 235);
        }

        .container .main {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            border: red solid 1px;
        }

        .container .main fieldset>div {
            display: flex;
            flex-flow: row wrap;
        }

        .container .main fieldset>div>div,
        .container .buttom fieldset>div>div {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin: 1px;
            width: 75px;
            height: 35px;
            border: black 1px solid;
            border-radius: 10px;
            font-size: 12px;
            /* background-image: linear-gradient(white, white, red); */
        }

        .container .buttom {
            display: flex;
            border: green solid 1px;
        }

        .container .buttom fieldset {
            width: 100%;
        }

        .container .buttom fieldset>div {
            display: flex;
        }
    </style>
</head>

<body>
    <div class="container" id="app">
        <div class="top" @click="focus">
            <div class="input-div">
                <input type="text" class="input" style="text-align:center" @keyup.enter="grant" v-model="code"
                    ref="rfcode" />
                <h1>{{ timeString }}</h1>
            </div>
            <video width="320" height="240" ref="video"></video>
        </div>
        <div class="main" @click="focus">
            <fieldset v-for="category in categories" :key="category.FNO">
                <legend>{{ category.FNO }}</legend>
                <div @contextmenu.self.prevent="add(category.FNO)">
                    <div v-for="item in findByCategory(category.FNO)" :key="item.rfcode"
                        :style="{backgroundColor: item.rfzt === '领用' ? 'red' : 'green'}" @click="select(item.RFcode)"
                        @contextmenu.prevent="edit(item)">
                        <div>{{item.RFcode}}</div>
                        <div>{{item.sskb}}</div>
                    </div>
                </div>
            </fieldset>
        </div>
        <div class="buttom" @click="focus">
            <fieldset>
                <legend>最后10条操作记录</legend>
                <div>
                    <div v-for="item in last10" :key="item.id"
                        :style="{backgroundColor: item.rfzt === '领用' ? 'red' : 'green'}" @click="select(item.rfcode)">
                        <div>{{item.rfcode}}</div>
                        <div>{{item.rfsskb}}</div>
                    </div>
                </div>
            </fieldset>
        </div>
        <audio ref="player" sytle="display: none"></audio>
    </div>
    <script src="./render.js"></script>
</body>

</html>